<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>ID preserva el estilo</title>
	<style type="text/css">
	
		.text{font-family: sans-serif;font-weight: bold;}
		
		#main .text{font-weight: bold;background-color: pink;}
		
		.content .text{font-weight: normal;background-color: white;}
		
		p .text{font-weight: normal;background-color: black;}
		
		span.text{font-weight: normal;background-color: red;}
		
		.main .text{font-weight: lighter;background-color: blue;}
		
	</style>
</head>
<body>
	<div id="main" class="main">
	
		<div class="content">
		
			<h1 class="title">A esto me referia:</h1>
			
			<p class="text">Un selector de la forma ID+CLASS tiene precedencia sobre un selector de la forma CLASS+CLASS o TAG+CLASS, ETC.</p>
			
			<p class="text"> Y sin importar el order de invocacion!
			
			</p>
			<div>
			
				.text{font-family: sans-serif;font-weight: bold;}<br/>
				
				#main .text{font-weight: bold;background-color: pink;}<br/>
				
				.content .text{font-weight: normal;background-color: white;}<br/>
				
				p .text{font-weight: normal;background-color: black;}<br/>
				
				span.text{font-weight: normal;background-color: red;}<br/>
				
				.main .text{font-weight: lighter;background-color: blue;}<br/>
						
			</div>
			
			<span class="text">pd:no escribo tildes ;-)</span>
			
		</div>	
	
	</div>


</body>
</html>